<template>
	<view class="page_content">
		<view class="flex_center text_28">
			<u-icon name="hourglass" color="#333333" size="20"></u-icon> 提示:你可以离开本页面，并随时回来查看进度
		</view>
		
		<view class="flex_center mt_48">
			<mprogress :progress="progress" :width="100" :borderWidth="30"></mprogress>
		</view>

		<view class="c_01B text-center mt_48 text_36">处理中</view>
		<view class="flex_center mt_96">
			<view class="btn flex_center agree" @click="handleDelete">取消本次任务</view>
		</view> 
	</view>
</template>

<script>
import mprogress from '@/components/m-progress/mprogress.vue'
import { getBuildProgress, cancelBuild } from '@/api/common.js'
export default {
	//注册
	components:{
	    mprogress
	},
	data() {
		return {
			buildModelId: 0,
			progress: 0,
			times: null
		}
	},
	onLoad(options) {
		this.buildModelId = options.buildModelId || 120
		this.refresh()
		this.times = setInterval(() => {
		 this.refresh()
		}, 1000 * 60)
	},
	methods: {
		refresh() {
			getBuildProgress({buildModelId: this.buildModelId}).then(res => {
				this.progress = res.data 
			})
		},
		handleDelete() {
			let that = this
			uni.showModal({
				title: '提示',
				content: '确定取消本次任务？',
				success: function (res) {
					if (res.confirm) {
						that.handleCancel()
					}
				}
			});
		},
		handleCancel() {
			cancelBuild({buildModelId: this.buildModelId}).then(res => {
				if(res.code == 200) {
					uni.showToast({
						icon: 'none',
						title: res.msg
					})
					setTimeout(function() {
						this.times = null;
						uni.navigateBack();
					}, 1000);
				}else {
					uni.showToast({
						icon: 'none',
						title: res.msg
					})
				}
			})
		}
	}
}
</script>
<style scoped>
	.btn {
		width: 45%;
		height: 72rpx;
		border-radius: 40rpx;
		background: #dd524d;
		color: #FFFFFF;
	}
</style>